<template>
	<view class="p-2">
		<cl-navbar :title="$t('my.index.purse')" leftIconSize="40rpx" placeholder autoBack>
		</cl-navbar>
		<view class="account-bg position-relative rounded-lg thisBorder pb-2">
			<view class="flex flex-column px-4 pt-5 pb-2">
				<!-- 账户余额 -->
				<text class="colorM font32">{{$t('user.balance')}}</text>
				<!-- <text class="colorZ font46 pt-1">{{$store.state.user.ismoeny}}</text> -->
				<text class="colorZ font46 pt-1">{{$store.state.playlet.isUserInfo.coin || '0.00'}}</text>
			</view>
			<view class="position-absolute top-0 right-0">
				<u--image :showLoading="true" src="/static/user/accbg.png" width="50px" height="50px"></u--image>
			</view>
		</view>
		<view class="mt-2">
			<view class="">
				<!-- 选择充值金额 -->
				<text class="font32 pl-1">{{$t('user.selectamount')}}</text>
			</view>
			<view class="grid-col3 grid-space10 pt-2">
				<view
					class="flex flex-column justify-center align-center rounded p-2 vip-item position-relative overflow-hidden"
					v-for="(item,index) in money" :key="index" :class="[formData.trade_id == item.id ? 'border-active': '']"
					@click="chooseClick(item.id)">
					
					<view class="colorZ font38 flex"><u-icon name="/static/user/coin.png" size="13"></u-icon><text
							class="pl-1">{{item.coin}}</text></view>
					<text class="font28 pt-1">{{item.type}}{{item.recharge}}</text>
					<view class="position-absolute right-0 bottom-0 vip-bg"
						style="border-top-left-radius:10px ; padding: 5rpx 2rpx 2rpx 5rpx;"
						v-if="formData.trade_id==item.id">
						<u-icon name="checkbox-mark" size="12" color="#121242"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="mt-4" v-if="false">
			<view class="">
				<!-- 选择充值金额 -->
				<text class="font32 pl-1">{{$t('payset.payType')}}</text>
			</view>
			<view class="p-2 pt-1">
				<view class="flex justify-between align-center py-2" v-for="(item,index) in payList" :key="index" @click="payClick(item)">
					<u-icon :label="item.front_title" labelColor="#333333" size="24" :name="item.icon"></u-icon>
					<view class="">
						<u-icon size="16" name="checkmark-circle-fill" color="#FF4735" v-if="current==item.id"></u-icon>
						<u-icon size="16" name="checkmark-circle" color="#888888" v-else></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="mt-2">
			<view class="">
				<!-- 充值说明 -->
				<text class="font32 pl-2">{{$t('user.rechargeInstructions')}}</text>
			</view>
			<view class="colorC font30 px-2 pt-1" style="line-height: 46rpx;">
				<p v-for="(item,index) in list" :key="index">{{index+1}}、{{item.text}}</p>
			</view>
		</view>
		<view class="position-fixed bottom-0 left-0 right-0 safe-bottom">
			<view class="p-2">
				<!-- <u-button :text="$t('user.confirmRecharge')" shape="circle" :customStyle="{color:'#111111'}" color="linear-gradient(to bottom, #b8965c, #9b7735)" @click="goPay" :disabled="disabled"></u-button> -->
				<u-button :text="$t('user.confirmRecharge')" shape="circle" :customStyle="{color:'#111111'}" color="linear-gradient(to bottom, #b8965c, #9b7735)" @click="$public.isShowtost('支付对接中～')" :disabled="disabled"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: null,
				isMoney:null,
				money: [],
				payList:[],
				list:[],
				current:null,
				payToken:'',
				disabled:false,
				formData:{
					trade_type:'recharge',
					trade_id:'',
					pay_type:'',
					coin_code:'money',
					token:''
				},
				orderID:'',
				isSetInterval:null
			};
		},
		onLoad(){
			// this.getMoney()
			// let userInfo=uni.getStorageSync("userInfo")
			// if(userInfo){
			// 	this.isMoney=userInfo.money
			// }
			this.getRechargeList()
			this.getPayNote()
			this.getPayPlatform()
		},
		onShow() {
			this.$store.dispatch('getUserIsInfo')
		},
		methods: {
			chooseClick(id) {
				this.formData.trade_id = id
				clearInterval(this.isSetInterval)
			},
			// 获取充值套餐
			getRechargeList(){
				console.log("开始获取充值套餐");
				this.$api.playlet.getRechargeList().then(res=>{
					console.log('获取充值套餐',res);
					this.money=res.data.list
					
				})
			},
			// 获取账户余额
			getMoney(){
				this.$store.dispatch('getUserMoney')
				console.log(this.$store.state.user.ismoeny);
			},
			getPayNote(){
				this.$api.playlet.getPayNote().then(res=>{
					console.log('getPayNote',res);
					this.list=res.data
				})
			},
			// 获取支付方式
			getPayPlatform(){
				this.$api.playlet.getPayPlatform({coin_code:'money'}).then(res=>{
					console.log("获取支付方式",res);
					this.payList=res.data.list
				})
			},
			payClick(item){
				this.current=item.id
				this.formData.pay_type=item.pay_type
				clearInterval(this.isSetInterval)
			},
			// 获取支付token
			getPayToken(){
				console.log("用户ID",this.$store.state.playlet.isUserInfo.user_id);
				this.$api.playlet.getPayToken({user_id:this.$store.state.playlet.isUserInfo.user_id}).then(res=>{
					console.log("token",res);
					this.formData.token=res.data.token
					this.$api.playlet.getPay(this.formData).then(res => {
						console.log("生成订单返回",res);
						this.orderID=res.data.info.order_id
						this.disabled=false
						this.orderStatus()
						plus.runtime.openURL(res.data.info.url) 
					})
				})
			},
			goPay(){
				if(this.formData.trade_id==""){
					this.$public.isShowtost("请选择充值金额")
				}else if(this.formData.pay_type==""){
					this.$public.isShowtost("请选择支付方式")
				}else{
					this.disabled=true
					this.getPayToken()
				}
			},
			orderStatus(){
				console.log("this.orderID",this.orderID);
				this.isSetInterval=setInterval(()=>{
					this.$api.playlet.orderStatus({id:this.orderID}).then(res=>{
						console.log("返回订单状态",res);
						if(res.data.status==2){
							clearInterval(this.isSetInterval)
							this.$public.isShowtost("充值成功")
							this.$store.dispatch('getUserIsInfo')
						}
					})
				},2000)
			}
		}
	}
</script>

<style lang="scss">
	.thisBorder {
		border: solid 1px #25263b;
	}

	.vip-main {
		border-radius: 10px 10px 0 0;
	}

	.vip-item {
		background-color: #1b1c31;
		border: solid 1rpx rgba(227, 186, 129, 0.1);
	}

	.border-active {
		border-color: #9b7735;
	}
</style>